<template>
  <!-- 绑定一个自定义事件hello给子组件，表示需要子组件传值 -->
  <Demo msg="你好啊" school="尚硅谷" @hello="hello">
    <!-- 插槽内容得写在子组件内部，这样就表示子组件是需要使用的 -->
    <template v-slot:asd>
      <span>插槽内容</span>
    </template>
  </Demo>
</template>

<script>
import Demo from "./components/Demo.vue";

export default {
  name: "App",
  components: {
    Demo,
  },
  setup() {
    function hello(value) {
      console.log("-----接收到了子组件的值：", value);
    }

    return {
      hello,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
